<template>
	<view class="panel">

		<view class="video-content" v-if="showVideo">
			<video v-if="showVideo" :src="playVideoSrc" autoplay="true" style="width: 100%;height: 100%;"></video>
			<uni-icons @click="()=>{showVideo=!showVideo}" class="video-close" type="closeempty" color="#ff4d4f"
				size="32"></uni-icons>
		</view>

		<view class="left-panel">
			<view class="title">
				<a-typography-title :level="3">
					学员信息
				</a-typography-title>
			</view>
			<a-skeleton active :loading="info==null"></a-skeleton>
			<view class="userinfo" v-if="info!=null">
				<a-row type="flex" style="width: 100%;" :gutter="[12,12]">
					<a-col :span="24">姓名:{{info.studentName}}</a-col>
					<a-col :span="24">身份证:{{info.idCard}}</a-col>
					<a-col :span="24">考试车型:{{info.drive.data[0].name}}</a-col>
					<a-col :span="24">考试科目:{{info.subject.data[0].name}}</a-col>
					<a-col :span="24">证件类型:{{info.cert.data[0].name}}</a-col>
				</a-row>
			</view>
		</view>
		<view class="right-panel">

			<view class="title">
				<a-typography-title :level="3">
					培训项目
				</a-typography-title>
			</view>

			<view class="subject-info">
				<a-skeleton active :loading="info==null"></a-skeleton>
				<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="subject-page"
					field="_id,s_id,test_paper_ids" :page-size="500" :where="categoryWhere" @load="queryLoad"
					loadtime="manual">
					<view v-if="error">{{error.message}}</view>
					<view v-else style="height: 50vh;">
						<a-row type="flex" justify="start">
							<a-col :span="4">
								<a-checkbox @change="onCheckAll">
									全选
								</a-checkbox>
							</a-col>
						</a-row>
						<view class="subject-list" v-if="dataList.length>0">
							<a-row>

								<a-col :span="24" v-for="(item,index) in dataList" :key="item._id">
									<a-row style="width: 100%;height: 112rpx;" type="flex" class="subject-item">

										<span>
											<a-checkbox v-model:checked="changeList[index].check" :value="index"
												@change="changePaperList">
											</a-checkbox>
										</span>

										<a-col :span="12" style="margin-left: 32rpx;">
											{{item.name}}
										</a-col>
										<a-col :span="11" v-if="item.video_link.length>0">
											<a-row type="flex" justify="end">
												<a-col>
													<a-button type="primary" size='small'
														@click="showVideoFn(item.video_link)">
														视频学习
													</a-button>
												</a-col>
											</a-row>
										</a-col>
									</a-row>
									<a-divider style="margin: 0;"></a-divider>
								</a-col>

							</a-row>
						</view>
					</view>
				</unicloud-db>
			</view>
			<a-divider></a-divider>
			<view class="opear-button-group">
				<a-row :gutter="[2,2]">
					<a-col :span="8">
						<a-button block @click="$topage('/pages/exercise/testpage',
						{
							id:paper_list,
							studentName:info.studentName,
							uid:info.uid,
							drive:info.drive.data[0].name,
							subject:info.subject.data[0].name,
							cert:info.cert.data[0].name,
							model:'order',
							category:'true',
							subjectName:subjectName
						},
						'new','testpage','post')">
							顺序练习
						</a-button>
					</a-col>
					<a-col :span="8">
						<a-button block type="primary" @click="$topage('/pages/exercise/testpage',
						{
							id:paper_list,
							studentName:info.studentName,
							uid:info.uid,
							drive:info.drive.data[0].name,
							subject:info.subject.data[0].name,
							cert:info.cert.data[0].name,
							model:'rand',
							category:'true',
							subjectName:subjectName,
						},
						'new','testpage','post')">
							随机练习
						</a-button>
					</a-col>

					<a-col :span="8">
						<a-button block type="danger" @click="$back()">
							返回
						</a-button>
					</a-col>
				</a-row>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const cmd = db.command

	import config from '@/admin.config.js'

	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				dataList: [],
				changeList: [],
				info: null,
				subjectId: '',
				categoryWhere: {},
				checkAll: false,
				paper_list: [],
				subjectName: '',
				playVideoSrc: '',
				showVideo: false,
				lang: 'CN'
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'user/isTokenValid'
			})
		},
		onLoad(params) {
			this.subjectId = params.category
			this.subjectName = params.subjectName
			this.categoryWhere = {
				s_id: uniCloud.database().command.eq(this.subjectId)
			}
			if (this.isLogin) {
				this.getUserInfo()
			}
		},
		onShow() {
			this.checkToken()
			// if (!this.isLogin) {
			// 	uni.showModal({
			// 		content: '登录状态失效，请重新登录',
			// 		showCancel: false,
			// 		success() {
			// 			uni.reLaunch({
			// 				url: config.login.url
			// 			})
			// 		}
			// 	})
			// }
		},
		onReady() {
			this.$refs.udb.loadData()
		},
		methods: {
			checkToken() {
				const self = this
				uniCloud.callFunction({
					name: 'uni-id-cf',
					data: {
						action: 'checkToken'
					}
				}).then(res => {
					if (res.result.code === 30202) {
						uni.showModal({
							content: '登录状态失效，请重新登录',
							showCancel: false,
							success() {
								uni.reLaunch({
									url: config.login.url
								})
							}
						})
					} else {
						if (self.isLogin) {
							self.getUserInfo()
						} else {
							if (!self.isLogin) {
								uni.showModal({
									content: '登录状态失效，请重新登录',
									showCancel: false,
									success() {
										uni.reLaunch({
											url: config.login.url
										})
									}
								})
							}
						}
					}
					console.log(res)
				})
			},
			showVideoFn(videoInfo) {
				console.log(videoInfo[0])
				this.playVideoSrc = this.$cdn + videoInfo[0]
				this.showVideo = true
			},
			onCheckAll() {
				this.checkAll = !this.checkAll
				if (this.checkAll) {
					for (let s of this.changeList) {
						s.check = true
						this.paper_list.push(s.s_id)
					}
				} else {
					this.setListStatus(false)
					this.paper_list = []
				}
			},
			setListStatus(status) {
				for (let s of this.changeList) {
					s.check = status
				}
			},
			changePaperList(e) {
				const index = e.target.value
				const cur_obj = this.changeList[index]
				if (cur_obj.check) {
					this.paper_list.push(cur_obj.s_id)
				} else {
					this.paper_list.splice(this.paper_list.indexOf(cur_obj.s_id), 1)
				}
			},
			queryLoad(data) {
				const self = this
				const mapSort = new Map()
				for (let s of data[0].test_paper_ids) {
					mapSort.set(s, [])
				}

				for (let s of data[0].test_paper_ids) {
					this.changeList.push({
						check: false,
						s_id: s
					})
				}
				db.collection('test-paper').where({
						s_id: cmd.in(Array.from(mapSort.keys()))
					})
					.field('_id,keyword,name,s_id,sid,video_link,video_name')
					.limit(500)
					.get()
					.then((testRes) => {
						for (let row of testRes.result.data) {
							mapSort.set(row.s_id, row)
						}
						for (let s of Array.from(mapSort.values())) {
							this.dataList.push(s)
						}
					})

				// this.dataList = data
			},
			getUserInfo() {
				this.info = uni.getStorageSync('info')
			},


		}
	}
</script>

<style scoped lang="scss">
	@import url('./category.css');
</style>
